<!--数据统计-->
<template>
  <el-drawer
    :title="detailInfo.taskName"
    size="900px"
    :visible="visible"
    @close="updateVisible(false)">
    <div class="padding30">
      <div class="flex-align-center flex">
        <div :class="typeIndex==j ? 'type-cls' : 'no-type-cls'" v-for="(i,j) in typeList" :key="j" @click="typeClick(j)">{{i.title}}</div>
      </div>
      <div class="flex m-cls">
        <div class="flex-align-center width100">
          <div class="flex-column numberCount">
            <span>曝光量</span>
            <div>{{viewCount}}</div>
          </div>
          <div class="flex-column numberCount num-border">
            <span>点赞数</span>
            <div>{{likeCount}}</div>
          </div>
          <div class="flex-column numberCount">
            <span>评论数</span>
            <div>{{commentCount}}</div>
          </div>
        </div>
      </div>
      <div class="p-algin10">
        <!--toolkit：大小，行数，是否全屏展示，不加，则会展示全部（包含刷新）
            toolDefault: 表头背景
            :toolkit="[]"
            -->
        <!--toolbar :是否显示表头工具栏
          :toolbar="false"-->
        <ele-pro-table
           ref="table"
          :toolkit="[]"
          size="mini"
          :columns="columns2"
          :datasource="datasource"
          :selection.sync="selectionAccount"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!--头部按钮-->
          <template v-slot:toolbar>
            <div class="btn-class">
              <el-button type="primary" size="small" @click="getAccounts()" :loading="loading">
                数据刷新
              </el-button>
            </div>
          </template>
          <!-- 头像列 -->
          <template v-slot:head="{ row }">
            <div style="line-height: 1">
              <el-avatar v-if="row.head" :src="row.head" :size="35" />
            </div>
          </template>
          <!--操作-->
          <template v-slot:action="{ row }">
            <el-link
              type="primary"
              :disabled="!row.videoUrl"
              :underline="false"
              @click.stop="viewWorks(row)"
            >
              观看作品
            </el-link>
          </template>
        </ele-pro-table>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import {queryDyksCount,digitalDataRefresh,queryAllCount} from "@/api/digitalHumanManagement/taskList";
  import {getActivityes} from "@/api/explosiveCode/releaseActivity";
  import {ksPhotoList} from "@/api/matrixManage/accountList";
  export default {
    name: "data-detail",
    props:{
      visible:Boolean
    },
    data(){
      return{
        loading:false,
        form:{
          // page:1,
          // limit:1,
          types:1
        },
        detailInfo:{},
        typeIndex:0,
        typeList:[
          /*{
            title:'D音cookie',
            id:1
          },
          {
            title:'D音H5',
            id:2
          },*/
          {
            title:'D音',
            id:1
          },
          {
            title:'K手',
            id:2
          },
        ],
        // 分组用户信息
        accounts:[],
        viewCount:0,//曝光量
        likeCount:0,//点赞数
        commentCount:0,//评论数

        selectionAccount:[],
        // 分组用户list
        columns2: [
          {
            prop: 'head',
            label: '头像',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'head'
          },
          {
            prop: 'nickname',
            label: '用户昵称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'viewCount',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : 0;
            }
          },
          {
            prop: 'likeCount',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : 0;
            }
          },
          {
            prop: 'commentCount',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true,
            formatter: (_row, _column, cellValue) => {
              return cellValue ? cellValue : 0;
            }


          },
          {
            prop: 'createTime',
            label: '发布时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
          }
        ],
      }
    },
    methods:{
      // 查询矩阵账号【分页查询】
      query(row){
        this.typeIndex=0
        this.form.types=this.typeList[0].id
        this.form.taskId=row.id
        this.detailInfo=row
        setTimeout(()=>{
          this.reload()
        },2000)
      },
      typeClick(e){
        this.typeIndex=e
        this.form.types=this.typeList[e].id
        this.clear()
        this.$nextTick(()=>{
          this.reload()
        })
      },
      clear(){
        this.viewCount=0//曝光量
        this.likeCount=0//点赞数
        this.commentCount=0//评论数
      },



      async datasource({ page, limit, where, order }) {
        if(!this.form.taskId){
          return
        }
        const result = await queryDyksCount({ ...where, ...order, page, limit,...this.form });
        this.clear()
        console.log("result",result)
        /*let list=result.list
        for(let i=0;i<list.length;i++){
          list[i].viewCount = list[i].viewCount ?list[i].viewCount: 0
          list[i].likeCount = list[i].likeCount ?list[i].likeCount: 0
          list[i].commentCount = list[i].commentCount ?list[i].commentCount: 0
          this.viewCount += list[i].viewCount //曝光量
          this.likeCount += list[i].likeCount //点赞数
          this.commentCount += list[i].commentCount //评论数
        }
        console.log('datasourcethis.viewCount',this.viewCount)*/
        return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },

      /* 刷新表格 */
      reload(where) {
        this.queryAllCounts()//查询总数据
        this.$refs.table.reload({ page: 1,limit:10, where: where });
      },
      queryAllCounts(){
        queryAllCount(this.form)
          .then((data) => {
            console.log("查询总数据",data)
            this.viewCount = data.viewCount || 0 //曝光量
            this.likeCount = data.likeCount || 0  //点赞数
            this.commentCount = data.commentCount || 0  //评论数
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },
      statistics(){
        queryDyksCount(this.form)
          .then((data) => {
            this.accounts=data.list
            this.clear()
            console.log("this.accounts",this.accounts)
            for(let i=0;i<this.accounts.length;i++){
              this.accounts[i].viewCount = this.accounts[i].viewCount ?this.accounts[i].viewCount: 0
              this.accounts[i].likeCount = this.accounts[i].likeCount ?this.accounts[i].likeCount: 0
              this.accounts[i].commentCount = this.accounts[i].commentCount ?this.accounts[i].commentCount: 0
              this.viewCount += this.accounts[i].viewCount //曝光量
              this.likeCount += this.accounts[i].likeCount //点赞数
              this.commentCount += this.accounts[i].commentCount //评论数
            }
          })
          .catch((e) => {
            this.loading=false
            this.$message.error(e);
          });
      },
      // 数据刷新
      getAccounts(){
        console.log("数据刷新row")
        this.loading=true
        digitalDataRefresh({
          types:this.form.types,
          taskId:this.form.taskId,
          username:this.$store.state.user.info.username
        })
          .then((data) => {
            this.$message.success('刷新成功!');
            this.loading=false
            this.$nextTick(()=>{
              this.reload()
            })
          })
          .catch((e) => {
            this.loading=false

            this.$message.error(e);
          });

      },
      // 观看作品
      viewWorks(row){
        console.log("点击了观看作品",row)
        let videoUrl = row.videoUrl
        window.open(videoUrl)
      },
      /* 更新 visible */
      updateVisible(value) {
        this.$emit('update:visible', value);
      },
    }
  }
</script>

<style scoped lang="less">
  /*表格头部按钮*/
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0;
      width: 94px;
      border-radius: 2px;
      height: 33px;
    }
  }
  .padding30{
    padding: 30px;
  }
  .type-cls ,.no-type-cls{
    margin: 0 20px;
    padding: 5px 10px;
    font-size: 16px;
  }
  .no-type-cls{
    color: #666666;
    background-color: #F4F4F4;
  }
  .type-cls{
    color: #1E6CEB;
    background-color: #C6E3FF;
  }
  .m-cls{
    margin: 30px 0 20px;
    .numberCount{
      width: calc(100% / 3);
      span{
        color: #757575;
      }
      div{
        margin-top: 11px ;
        color: #1E6CEB;
        font-size: 32px;
      }
    }
    .num-border{
      border-left: 1px solid #F0F0F0;
      border-right: 1px solid #F0F0F0;
    }
  }
</style>
